<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 第 07 天 —— 高级技巧 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/4.4eeb3907.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/3.924754cc.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="sidebar-link">CSS 学习</a></li><li><a href="/basenode/css/day01.html" class="sidebar-link">CSS 第 01 天 —— 基础选择器</a></li><li><a href="/basenode/css/day02.html" class="sidebar-link">CSS 第 02 天 —— 复合选择器</a></li><li><a href="/basenode/css/day03.html" class="sidebar-link">CSS 第 03 天 —— 盒子模型</a></li><li><a href="/basenode/css/day04.html" class="sidebar-link">CSS 第 04 天 —— 浮动</a></li><li><a href="/basenode/css/day05.html" class="sidebar-link">CSS 第 05 天 —— 学成在线</a></li><li><a href="/basenode/css/day06.html" class="sidebar-link">CSS 第 06 天 —— 定位</a></li><li><a href="/basenode/css/day07.html" aria-current="page" class="active sidebar-link">CSS 第 07 天 —— 高级技巧</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#能力目标" class="sidebar-link">能力目标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#导读" class="sidebar-link">导读</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#☆1-精灵图" class="sidebar-link">☆1. 精灵图</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_1-1-为什么需要精灵技术" class="sidebar-link">1.1 为什么需要精灵技术</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_1-2-精灵图使用-原理" class="sidebar-link">1.2 精灵图使用（原理）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_1-3-精灵图使用-代码" class="sidebar-link">1.3 精灵图使用（代码）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_1-4-精灵图案例-拼出自己名字" class="sidebar-link">1.4 精灵图案例-拼出自己名字</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#☆2-字体图标" class="sidebar-link">☆2. 字体图标</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#☆2-1-字体图标产生和优点" class="sidebar-link">☆2.1 字体图标产生和优点</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_2-2-字体图标下载" class="sidebar-link">2.2 字体图标下载</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#☆2-3-字体图标的使用" class="sidebar-link">☆2.3 字体图标的使用</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_2-4-字体图标的追加和加载原理" class="sidebar-link">2.4 字体图标的追加和加载原理</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#☆3-css-三角" class="sidebar-link">☆3. CSS 三角</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_3-1-css-三角的做法" class="sidebar-link">3.1 CSS 三角的做法</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_3-2-css-三角应用-京东效果" class="sidebar-link">3.2 CSS 三角应用-京东效果</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_4-用户界面样式" class="sidebar-link">4. 用户界面样式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_4-1-用户界面-鼠标样式" class="sidebar-link">4.1 用户界面-鼠标样式</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_4-2-用户界面-取消表单轮廓和防止拖拽文本域" class="sidebar-link">4.2 用户界面-取消表单轮廓和防止拖拽文本域</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_4-3-vertical-align-实现行内块和文字垂直居中对齐" class="sidebar-link">4.3 vertical-align 实现行内块和文字垂直居中对齐</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_4-4-图片底侧空白缝隙解决方案" class="sidebar-link">4.4 图片底侧空白缝隙解决方案</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_4-5-单行文字溢出省略号显示" class="sidebar-link">4.5 单行文字溢出省略号显示</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_4-6-多行文字溢出省略号显示" class="sidebar-link">4.6 多行文字溢出省略号显示</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_5-布局技巧" class="sidebar-link">5. 布局技巧</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_5-1-布局技巧-margin-负值巧妙运用-上" class="sidebar-link">5.1 布局技巧-margin 负值巧妙运用（上）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_5-2-布局技巧-margin-负值巧妙运用-下" class="sidebar-link">5.2 布局技巧-margin 负值巧妙运用（下）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_5-3-布局技巧-文字围绕浮动元素巧妙运用" class="sidebar-link">5.3 布局技巧-文字围绕浮动元素巧妙运用</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_5-4-布局技巧-行内块的巧妙运用" class="sidebar-link">5.4 布局技巧-行内块的巧妙运用</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_5-5-布局技巧-css-三角巧妙运用-上" class="sidebar-link">5.5 布局技巧-CSS 三角巧妙运用（上）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_5-6-布局技巧-css-三角巧妙运用-下" class="sidebar-link">5.6 布局技巧-CSS 三角巧妙运用（下）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day07.html#_5-7-css-初始化" class="sidebar-link">5.7 CSS 初始化</a></li></ul></li></ul></li><li><a href="/basenode/css/day08.html" class="sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-第-07-天-高级技巧"><a href="#css-第-07-天-高级技巧" class="header-anchor">#</a> CSS 第 07 天 —— 高级技巧</h1> <h2 id="能力目标"><a href="#能力目标" class="header-anchor">#</a> 能力目标</h2> <ol><li>能够使用精灵图并理解精灵图的原理；</li> <li>能够掌握字体图标的使用步骤；</li> <li>能够写出 CSS 三角形并理解原理；</li> <li>能顾利用 <code>vertical-align</code> 解决图片间隙问题；</li> <li>能够完成 <code>margin</code> / 行内块 / 京东三角形案例；</li> <li>能够理解为什么需要 CSS 初始化，并理解京东的 CSS 初始化都做了哪些设置。</li></ol> <h3 id="导读"><a href="#导读" class="header-anchor">#</a> 导读</h3> <blockquote><p>第 1 节课 / 1'25''</p></blockquote> <p>过渡视频，介绍 CSS 第 7 天的学习路径：</p> <ol><li>图片相关的性能优化
<ol><li>精灵图</li> <li>字体图标</li> <li>CSS 三角</li></ol></li> <li>用户界面样式（CSS 属性细节）
<ol><li>鼠标样式</li> <li>vertical-align 属性</li> <li>溢出文字的省略号显示</li></ol></li> <li>常见布局技巧
<ol><li>margin 负值的运用</li> <li>浮动元素文字环绕</li> <li>行内块运用</li> <li>CSS 三角形运用</li> <li>CSS 初始化</li></ol></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>思考：网页布局技巧只有这么多吗？网页布局技巧应该怎么学？</p> <p>提示：你永远不是第一个碰到这个问题的人。</p></div> <h2 id="☆1-精灵图"><a href="#☆1-精灵图" class="header-anchor">#</a> ☆1. 精灵图</h2> <h3 id="_1-1-为什么需要精灵技术"><a href="#_1-1-为什么需要精灵技术" class="header-anchor">#</a> 1.1 为什么需要精灵技术</h3> <blockquote><p>第 1 节课 / 4'56''</p></blockquote> <h4 id="_1-1-1-「为什么需要精灵技术」问题"><a href="#_1-1-1-「为什么需要精灵技术」问题" class="header-anchor">#</a> 1.1.1 「为什么需要精灵技术」问题</h4> <ul><li>问题 1：为什么需要使用精灵图？</li> <li>问题 2：什么是精灵图？</li></ul> <h4 id="_1-1-2-「为什么需要精灵技术」答案"><a href="#_1-1-2-「为什么需要精灵技术」答案" class="header-anchor">#</a> 1.1.2 「为什么需要精灵技术」答案</h4> <ul><li><p>问题 1：为什么需要使用精灵图？</p> <ul><li>为了有效地<strong>减少服务器接收和发送请求的次数</strong>，提高页面的加载速度。</li></ul></li> <li><p>问题 2：什么是精灵图？</p> <ul><li>精灵图又称雪碧图，CSS <code>Sprites</code>；</li> <li>将网页中需要使用的<strong>多张小图片整合到一张大图</strong>中，这样只要向浏览器<strong>发送更少次数的请求</strong>即可<strong>获得更多的图片</strong>。</li></ul></li></ul> <p><strong>精灵图</strong>示例如下：</p> <table><thead><tr><th>示例 1</th> <th>示例 2</th></tr></thead> <tbody><tr><td><img src="" alt="sprite"></td> <td><img src="/basenode/assets/img/sprites.878258fa.png" alt="sprites"></td></tr></tbody></table> <h3 id="_1-2-精灵图使用-原理"><a href="#_1-2-精灵图使用-原理" class="header-anchor">#</a> 1.2 精灵图使用（原理）</h3> <blockquote><p>第 1 节课 / 6'15''</p></blockquote> <h4 id="_1-2-1-「精灵图使用-原理-」问题"><a href="#_1-2-1-「精灵图使用-原理-」问题" class="header-anchor">#</a> 1.2.1 「精灵图使用（原理）」问题</h4> <ul><li>问题 1：精灵图的应用场景是什么？</li> <li>问题 2：使用精灵图的核心是什么？</li> <li>问题 3：网页中的坐标方向 <code>x</code> 轴是从左到右，<code>y</code> 轴是从上到下吗？</li> <li>问题 4：往左往上移动图片是正值还是负值？</li></ul> <h4 id="_1-2-2-「精灵图使用-原理-」答案"><a href="#_1-2-2-「精灵图使用-原理-」答案" class="header-anchor">#</a> 1.2.2 「精灵图使用（原理）」答案</h4> <ul><li><p>问题 1：精灵图的应用场景是什么？</p> <ul><li>精灵图主要针对<strong>背景图片</strong>使用。</li></ul></li> <li><p>问题 2：使用精灵图的核心是什么？</p> <ul><li>使用精灵图的核心是设置<strong>背景图片</strong> 的 <code>backgroud-position</code>（<strong>负值</strong>）。</li></ul></li> <li><p>问题 3：网页中的坐标方向 <code>x</code> 轴是从左到右，<code>y</code> 轴是从上到下吗？</p> <ul><li>是的</li> <li><code>x</code> 轴是从左到右变大，从右向左移动会减少（<strong>负值</strong>）</li> <li><code>y</code> 轴是从上到下变大，从下向上移动会减少（<strong>负值</strong>）</li></ul></li> <li><p>问题 4：往左往上移动图片是正值还是负值？</p> <ul><li>负值</li></ul></li></ul> <h3 id="_1-3-精灵图使用-代码"><a href="#_1-3-精灵图使用-代码" class="header-anchor">#</a> 1.3 精灵图使用（代码）</h3> <blockquote><p>第 1 节课 / 6'34''</p></blockquote> <p>精灵图使用步骤：</p> <ol><li><p>基于设计稿明确盒子大小（<code>宽 * 高</code>）；</p></li> <li><p>布局时给盒子指定：<code>width</code>、<code>height</code> 和 <code>background</code> 属性：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./images/sprites.png<span class="token punctuation">)</span></span> no-repeat<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>使用像素大厨等工具<strong>测量</strong>图片偏移坐标；</p></li> <li><p>设置 <code>background-position</code> 属性显示正确的图片。</p></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>如果测量中有误差，可以利用 Chrome 调试工具<strong>做微调并确认准确的坐标</strong>即可。</p></div> <h3 id="_1-4-精灵图案例-拼出自己名字"><a href="#_1-4-精灵图案例-拼出自己名字" class="header-anchor">#</a> 1.4 精灵图案例-拼出自己名字</h3> <blockquote><p>第 1 节课 / 7'34''</p></blockquote> <ol><li><p>练习时长：10 分钟</p></li> <li><p>练习目的：</p> <ol><li>练习使用<strong>像素大厨</strong>测量精灵图；</li> <li>体验精灵图的使用步骤；</li> <li>尝试使用 Chrome 微调精灵坐标，<strong>要以显示结果为主</strong>。</li></ol></li> <li><p>图片素材：</p> <p><img src="/basenode/assets/img/abcd.7907c218.jpg" alt="abcd"></p></li></ol> <h2 id="☆2-字体图标"><a href="#☆2-字体图标" class="header-anchor">#</a> ☆2. 字体图标</h2> <h3 id="☆2-1-字体图标产生和优点"><a href="#☆2-1-字体图标产生和优点" class="header-anchor">#</a> ☆2.1 字体图标产生和优点</h3> <blockquote><p>第 2 节课 / 5'10''</p></blockquote> <h4 id="_2-1-1-「字体图标产生和优点」问题"><a href="#_2-1-1-「字体图标产生和优点」问题" class="header-anchor">#</a> 2.1.1 「字体图标产生和优点」问题</h4> <ul><li>问题 1：字体图标的应用场景是什么？</li> <li>问题 2：精灵图有什么缺点？</li> <li>问题 3：字体图标的本质是什么？能够给字体图标更改大小或者修改颜色吗？</li> <li>问题 4：字体图标有什么优点？</li> <li>问题 5：字体图标能完全取代精灵图吗？在开发中如何选择？</li></ul> <h4 id="_2-1-2-「字体图标产生和优点」答案"><a href="#_2-1-2-「字体图标产生和优点」答案" class="header-anchor">#</a> 2.1.2 「字体图标产生和优点」答案</h4> <ul><li><p>问题 1：字体图标的应用场景是什么？</p> <ul><li>主要用于显示网页中通用、常用的一些小图标。</li></ul></li> <li><p>问题 2：精灵图有什么缺点？</p> <ul><li>本质还是图片，文件体积较大；</li> <li>图片在高清屏幕上放大和缩小会失真（在手机上尤为明显）；</li> <li>图片制作完毕要更换比较复杂。</li></ul></li> <li><p>问题 3：字体图标的本质是什么？能够给字体图标更改大小或者修改颜色吗？为什么？</p> <ul><li>字体图标是为前端工程师提供一种方便高效的图标使用方式；</li> <li><strong>展示的是图标，本质属于字体</strong>；</li> <li>因为字体图标的本质是字体，所以我们可以给字体图标更改大小或颜色。</li></ul></li> <li><p>问题 4：字体图标有什么优点？</p> <ul><li>轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求；</li> <li>灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；</li> <li>兼容性：几乎支持所有的浏览器，请放心使用。</li></ul></li> <li><p>问题 5：字体图标能完全取代精灵图吗？在开发中如何选择？</p> <ul><li>字体图标不能替代精灵图技术，只是对工作中图标部分技术的提升和优化。</li> <li>在开发中的选择：
<ul><li>字体图标：结构和样式比较简单的小图标（<strong>网站风格统一的素材</strong>）；</li> <li>精灵图：结构和样式复杂一点的小图片（<strong>网站风格统一的素材</strong>）；</li> <li>图片：非网站设计的，个性化的，例如：高清广告大图、用户上传的产品图片、用户头像等仍然使用独立的图片处理。</li></ul></li></ul></li></ul> <h3 id="_2-2-字体图标下载"><a href="#_2-2-字体图标下载" class="header-anchor">#</a> 2.2 字体图标下载</h3> <blockquote><p>第 2 节课 / 5'49''</p></blockquote> <h4 id="_2-2-1-「字体图标下载」问题"><a href="#_2-2-1-「字体图标下载」问题" class="header-anchor">#</a> 2.2.1 「字体图标下载」问题</h4> <ul><li>问题 1：视频中推荐了哪两个下载字体图标的网站？</li></ul> <h4 id="_2-2-2-「字体图标下载」答案"><a href="#_2-2-2-「字体图标下载」答案" class="header-anchor">#</a> 2.2.2 「字体图标下载」答案</h4> <ul><li><p>问题 1：视频中推荐了哪两个下载字体图标的网站？</p> <ul><li><code>icomoon</code> 字库 <a href="https://icomoon.io/" target="_blank" rel="noopener noreferrer">https://icomoon.io/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><code>iconfont</code> 阿里字库 <a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">https://www.iconfont.cn/<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>下载完毕之后，注意不要删除原先的文件，后面还会用到。</p></div> <p>猛击 <a href="/downloads/icomoon.zip">字体图标文件</a> 下载课程要使用的字体图标文件压缩包。</p></li></ul> <h3 id="☆2-3-字体图标的使用"><a href="#☆2-3-字体图标的使用" class="header-anchor">#</a> ☆2.3 字体图标的使用</h3> <blockquote><p>第 2 节课 / 8'20''</p></blockquote> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>提示：字体图标的使用步骤非常固定，不需要记忆也不用紧张，多用几遍就熟悉了。</p></div> <h4 id="_2-3-1-字体图标的使用详细步骤"><a href="#_2-3-1-字体图标的使用详细步骤" class="header-anchor">#</a> 2.3.1 字体图标的使用详细步骤</h4> <ol><li><p>将下载包里的 <code>fonts</code> 文件夹放入页面根目录下；</p> <p><img src="/basenode/assets/img/copy-fonts-folder.db16b45b.png" alt="copy fonts folder"></p> <ul><li><strong>TureType(.ttf) 格式</strong>：是 Windows 和 Mac 的最常见的字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；</li> <li><strong>Web Open Font Format(.woff)格式</strong>：支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；</li> <li><strong>Embedded Open Type(.eot)格式</strong>：是 IE 专用字体，支持这种字体的浏览器有 IE4+；</li> <li><strong>.SVG(.svg)格式</strong>：是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。</li></ul></li> <li><p>在 CSS 样式中全局声明字体</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'icomoon'</span><span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.eot?p4ssmb'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.eot?p4ssmb#iefix'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'embedded-opentype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.ttf?p4ssmb'</span><span class="token punctuation">)</span></span>
      <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'truetype'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.woff?p4ssmb'</span><span class="token punctuation">)</span></span> <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'woff'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'fonts/icomoon.svg?p4ssmb#icomoon'</span><span class="token punctuation">)</span></span>
      <span class="token function">format</span><span class="token punctuation">(</span><span class="token string">'svg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
  <span class="token property">font-display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>使用 VSCode 打开下载的 <code>style.css</code> 复制更方便。</p></div></li> <li><p>在 CSS 中定义字体图标的类</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.iconfont</span> <span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'icomoon'</span><span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>从下载的 <code>demo.html</code> 页面中复制<strong>小框框</strong>粘贴到页面中的 <code>span</code> 标签内</p> <p><img src="/basenode/assets/img/copy-fonts-icon-content.b7c3f67e.png" alt="copy-fonts-icon-content"></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>提示：字体图标的使用步骤非常固定，不需要记忆也不用紧张，多用几遍就熟悉了。</p> <p>在以上步骤中：</p> <ol><li>第 1~3 是固定的</li> <li>在开发中<strong>哪里需要字体图标</strong>，就从下载的页面中复制<strong>对应的小框框</strong>，然后<strong>指定一个类</strong>就行。</li></ol></div> <h4 id="_2-3-2-字体图标的使用练习"><a href="#_2-3-2-字体图标的使用练习" class="header-anchor">#</a> 2.3.2 字体图标的使用练习</h4> <ol><li>练习时长：5 分钟</li> <li>练习目的：熟悉字体图标的使用步骤。</li></ol> <h3 id="_2-4-字体图标的追加和加载原理"><a href="#_2-4-字体图标的追加和加载原理" class="header-anchor">#</a> 2.4 字体图标的追加和加载原理</h3> <blockquote><p>第 2 节课 / 4'10''</p></blockquote> <h4 id="_2-4-1-「字体图标的追加和加载原理」问题"><a href="#_2-4-1-「字体图标的追加和加载原理」问题" class="header-anchor">#</a> 2.4.1 「字体图标的追加和加载原理」问题</h4> <ul><li>问题 1：什么时候需要追加字体图标？</li> <li>问题 2：追加字体图标的关键文件是哪一个？</li> <li>问题 3：追加字体图标的步骤是什么？</li> <li>问题 4：字体图标加载的原理？</li></ul> <h4 id="_2-4-2-「字体图标的追加和加载原理」答案"><a href="#_2-4-2-「字体图标的追加和加载原理」答案" class="header-anchor">#</a> 2.4.2 「字体图标的追加和加载原理」答案</h4> <ul><li><p>问题 1：什么时候需要追加字体图标？</p> <ul><li>工作中，如果原来的字体图标不够用了，就需要添加新的字体图标到原来的字体文件中。</li></ul></li> <li><p>问题 2：追加字体图标的关键文件是哪一个？</p> <ul><li><code>selection.json</code></li></ul></li> <li><p>问题 3：追加字体图标的步骤是什么？</p> <ol><li>上传 <code>selection.json</code> - 让服务器知道我们之前使用的图标；</li> <li>挑选新的图标；</li> <li>下载替换原有的 <code>fonts</code> 目录 - <strong>以前的代码不用做任何修改</strong>。</li></ol> <p><img src="/basenode/assets/img/upload-selection-json.0e3b440d.png" alt="upload selection json"></p></li> <li><p>问题 4：字体图标加载的原理？</p> <p><img src="/basenode/assets/img/font-icons-work.c1a61e8a.gif" alt="font-icons-work"></p></li></ul> <h2 id="☆3-css-三角"><a href="#☆3-css-三角" class="header-anchor">#</a> ☆3. CSS 三角</h2> <h3 id="_3-1-css-三角的做法"><a href="#_3-1-css-三角的做法" class="header-anchor">#</a> 3.1 CSS 三角的做法</h3> <blockquote><p>第 2 节课 / 5'15''</p></blockquote> <h4 id="_3-1-1-「css-三角的做法」问题"><a href="#_3-1-1-「css-三角的做法」问题" class="header-anchor">#</a> 3.1.1 「CSS 三角的做法」问题</h4> <ul><li>问题 1：CSS 能做三角形吗？</li> <li>问题 2：用 CSS 做三角形有什么优缺点？</li> <li>问题 3：CSS 做三角形的核心原理是什么？</li> <li>问题 4：CSS 做三角形的步骤是什么？</li></ul> <h4 id="_3-1-2-「css-三角的做法」答案"><a href="#_3-1-2-「css-三角的做法」答案" class="header-anchor">#</a> 3.1.2 「CSS 三角的做法」答案</h4> <ul><li><p>问题 1：CSS 能做三角形吗？</p> <ul><li>能</li></ul></li> <li><p>问题 2：用 CSS 做三角形有什么优缺点？</p> <ul><li>优点
<ul><li>不需要使用图片，可以节省网络资源；</li> <li>可以给页面中长方形选框增加点缀性的指示器，用户体验更好；</li></ul></li> <li>缺点
<ul><li>对程序员的要求高。</li></ul></li></ul></li> <li><p>问题 3：CSS 做三角形的核心原理是什么？</p> <ul><li>CSS 中<strong>边框连接处</strong>是斜边连接的。</li></ul></li> <li><p>问题 4：CSS 做三角形的步骤是什么？</p> <ol><li><p>指定盒子的宽、高为 0 —— 让四条边都靠在一起；</p></li> <li><p>用 <code>border</code> 属性绘制透明边框</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border</span><span class="token punctuation">:</span> 100px solid transparent<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>需要哪个方向的三角形，就给哪个方向指定颜色（顺序：上右下左）</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-color</span><span class="token punctuation">:</span> red green blue orange<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>设置行高和字体，以保证兼容性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
</code></pre></div></li></ol></li></ul> <h4 id="_3-1-3-「css-三角的做法」练习"><a href="#_3-1-3-「css-三角的做法」练习" class="header-anchor">#</a> 3.1.3 「CSS 三角的做法」练习</h4> <ol><li>练习时长：5 分钟</li> <li>练习目的：熟悉绘制三角形的步骤，实现备课代码的效果。</li></ol> <h3 id="_3-2-css-三角应用-京东效果"><a href="#_3-2-css-三角应用-京东效果" class="header-anchor">#</a> 3.2 CSS 三角应用-京东效果</h3> <blockquote><p>第 3 节课 / 3'48''</p></blockquote> <h4 id="_3-2-1-css-三角应用-京东效果演练目标"><a href="#_3-2-1-css-三角应用-京东效果演练目标" class="header-anchor">#</a> 3.2.1 CSS 三角应用-京东效果演练目标</h4> <ol><li>子绝父相</li> <li>CSS 三角形应用</li></ol> <h4 id="_3-2-2-css-三角应用-京东效果步骤"><a href="#_3-2-2-css-三角应用-京东效果步骤" class="header-anchor">#</a> 3.2.2 CSS 三角应用-京东效果步骤</h4> <ol><li>准备父盒子（<code>120px * 240px</code> / 相对定位)</li> <li>准备子盒子（边框宽度 <code>10px</code>，方向向上的箭头 / 绝对定位）</li> <li>用边偏移调整子盒子位置</li></ol> <h4 id="_3-2-3-css-三角应用-京东效果实现"><a href="#_3-2-3-css-三角应用-京东效果实现" class="header-anchor">#</a> 3.2.3 CSS 三角应用-京东效果实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>jd<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>父盒子大小和位置</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.jd</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 240px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #aaa<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>子盒子三角形</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.jd span</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 10px solid transparent<span class="token punctuation">;</span>
  <span class="token property">border-bottom-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>子盒子定位</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> -20px<span class="token punctuation">;</span>
</code></pre></div></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ol><li>绘制三角形时先选择红色方便调整定位；</li> <li><code>top</code> 用负值表示向上移动；</li> <li>移动的距离是两倍的边框宽度；</li> <li>最后不要忘记把三角形的颜色设置成父盒子的颜色。</li></ol></div> <h2 id="_4-用户界面样式"><a href="#_4-用户界面样式" class="header-anchor">#</a> 4. 用户界面样式</h2> <h3 id="_4-1-用户界面-鼠标样式"><a href="#_4-1-用户界面-鼠标样式" class="header-anchor">#</a> 4.1 用户界面-鼠标样式</h3> <blockquote><p>第 3 节课 / 4'18''</p></blockquote> <h4 id="_4-1-1-「用户界面-鼠标样式」问题"><a href="#_4-1-1-「用户界面-鼠标样式」问题" class="header-anchor">#</a> 4.1.1 「用户界面-鼠标样式」问题</h4> <ul><li>问题 1：哪一个属性可以设置鼠标样式？</li> <li>问题 2：视频中介绍了几种鼠标样式？分别表示什么含义？</li></ul> <h4 id="_4-1-2-「用户界面-鼠标样式」答案"><a href="#_4-1-2-「用户界面-鼠标样式」答案" class="header-anchor">#</a> 4.1.2 「用户界面-鼠标样式」答案</h4> <ul><li><p>问题 1：哪一个属性可以设置鼠标样式？</p> <ul><li><code>cursor</code> 可以设置鼠标样式。</li></ul></li> <li><p>问题 2：视频中介绍了几种鼠标样式？分别表示什么含义？</p> <table><thead><tr><th>属性</th> <th>描述</th></tr></thead> <tbody><tr><td>default</td> <td>小白，默认</td></tr> <tr><td>pointer ☆</td> <td>小手，提示用户可以点击</td></tr> <tr><td>move</td> <td>移动，提示用户可以拖拽</td></tr> <tr><td>text</td> <td>文本，提示用户可以输入内容</td></tr> <tr><td>not-allowed</td> <td>禁止，提示用户</td></tr></tbody></table></li></ul> <h3 id="_4-2-用户界面-取消表单轮廓和防止拖拽文本域"><a href="#_4-2-用户界面-取消表单轮廓和防止拖拽文本域" class="header-anchor">#</a> 4.2 用户界面-取消表单轮廓和防止拖拽文本域</h3> <blockquote><p>第 3 节课 / 4'36''</p></blockquote> <h4 id="_4-2-1-「取消表单轮廓和防止拖拽文本域」问题"><a href="#_4-2-1-「取消表单轮廓和防止拖拽文本域」问题" class="header-anchor">#</a> 4.2.1 「取消表单轮廓和防止拖拽文本域」问题</h4> <ul><li>问题 1：用哪一个属性可以取消表单输入框的轮廓？</li> <li>问题 2：用哪一个属性可以禁止 <code>textarea</code> 被拖拽，这样设置有什么好处？</li> <li>问题 3：在使用 <code>textarea</code> 时为什么不建议把双标签换行写？</li></ul> <h4 id="_4-2-2-「取消表单轮廓和防止拖拽文本域」答案"><a href="#_4-2-2-「取消表单轮廓和防止拖拽文本域」答案" class="header-anchor">#</a> 4.2.2 「取消表单轮廓和防止拖拽文本域」答案</h4> <ul><li><p>问题 1：用哪一个属性可以取消表单输入框的轮廓？</p> <ul><li><code>outline: none;</code></li></ul></li> <li><p>问题 2：用哪一个属性可以禁止 <code>textarea</code> 被拖拽，这样设置有什么好处？</p> <ul><li><code>resize: none;</code></li> <li>可以防止用户拖拽文本域破坏界面布局。</li></ul></li> <li><p>问题 3：在使用 <code>textarea</code> 时为什么不建议把双标签换行写？</p> <ul><li><code>textarea</code> 中会完全还原 HTML 中的空格。</li></ul></li></ul> <h3 id="_4-3-vertical-align-实现行内块和文字垂直居中对齐"><a href="#_4-3-vertical-align-实现行内块和文字垂直居中对齐" class="header-anchor">#</a> 4.3 vertical-align 实现行内块和文字垂直居中对齐</h3> <blockquote><p>第 3 节课 / 8'05''</p></blockquote> <h4 id="_4-3-1-「vertical-align-实现行内块和文字垂直居中对齐」问题"><a href="#_4-3-1-「vertical-align-实现行内块和文字垂直居中对齐」问题" class="header-anchor">#</a> 4.3.1 「vertical-align 实现行内块和文字垂直居中对齐」问题</h4> <ul><li>问题 1：<code>vertical-align</code> 属性有哪些应用场景？</li> <li>问题 2：<code>vertical-align</code> 的语法是什么？</li> <li>问题 3：<strong>行内块元素</strong>默认的 <code>vertical-align</code> 对齐方式是什么？</li></ul> <h4 id="_4-3-2-「vertical-align-实现行内块和文字垂直居中对齐」答案"><a href="#_4-3-2-「vertical-align-实现行内块和文字垂直居中对齐」答案" class="header-anchor">#</a> 4.3.2 「vertical-align 实现行内块和文字垂直居中对齐」答案</h4> <ul><li><p>问题 1：<code>vertical-align</code> 属性有哪些应用场景？</p> <ul><li>用于设置图片或者表单(行内块元素）和文字垂直对齐。</li></ul></li> <li><p>问题 2：<code>vertical-align</code> 的语法是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">vertical-align</span><span class="token punctuation">:</span> baseline | top | middle | bottom<span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th>值</th> <th>描述</th></tr></thead> <tbody><tr><td>baseline</td> <td>默认，按照基线对齐</td></tr> <tr><td>top</td> <td>顶部对齐</td></tr> <tr><td>middle</td> <td>中部对齐</td></tr> <tr><td>bottom</td> <td>底部对齐</td></tr></tbody></table> <p><img src="/basenode/assets/img/text-vertical-align.f2add909.png" alt="text-vertical-align"></p></li> <li><p>问题 3：<strong>行内块元素</strong>默认的 <code>vertical-align</code> 对齐方式是什么？这种对齐方式存在什么问题？</p> <ul><li>默认按照基线对齐；</li> <li>会让图片底侧有一个空白缝隙。</li></ul></li></ul> <h3 id="_4-4-图片底侧空白缝隙解决方案"><a href="#_4-4-图片底侧空白缝隙解决方案" class="header-anchor">#</a> 4.4 图片底侧空白缝隙解决方案</h3> <blockquote><p>第 4 节课 / 4'25''</p></blockquote> <h4 id="_4-4-1-「图片底侧空白缝隙解决方案」问题"><a href="#_4-4-1-「图片底侧空白缝隙解决方案」问题" class="header-anchor">#</a> 4.4.1 「图片底侧空白缝隙解决方案」问题</h4> <ul><li>问题 1：是什么原因导致图片底边有一个空白缝隙？</li> <li>问题 2：如何解决图片底边的缝隙？</li></ul> <h4 id="_4-4-2-「图片底侧空白缝隙解决方案」答案"><a href="#_4-4-2-「图片底侧空白缝隙解决方案」答案" class="header-anchor">#</a> 4.4.2 「图片底侧空白缝隙解决方案」答案</h4> <ul><li><p>问题 1：是什么原因导致图片底边有一个空白缝隙？如何解决？</p> <ul><li>行内块元素和文本默认按照基线对齐。</li></ul></li> <li><p>问题 2：如何解决图片底边的缝隙？</p> <ul><li>添加 <code>vertical-align</code>：<code>middle</code> | <code>top</code> | <code>bottom</code>（推荐使用）；</li> <li>把图片转换为块级元素 <code>display: block;</code>。</li></ul></li></ul> <h3 id="_4-5-单行文字溢出省略号显示"><a href="#_4-5-单行文字溢出省略号显示" class="header-anchor">#</a> 4.5 单行文字溢出省略号显示</h3> <blockquote><p>第 4 节课 / 5'05''</p></blockquote> <h4 id="_4-5-1-「单行文字溢出省略号显示」问题"><a href="#_4-5-1-「单行文字溢出省略号显示」问题" class="header-anchor">#</a> 4.5.1 「单行文字溢出省略号显示」问题</h4> <ul><li>问题 1：单行文字溢出显示省略号有什么应用场景？</li> <li>问题 2：要实现单行文字溢出显示省略号有哪三个条件？</li></ul> <h4 id="_4-5-2-「为什么需要精灵技术」答案"><a href="#_4-5-2-「为什么需要精灵技术」答案" class="header-anchor">#</a> 4.5.2 「为什么需要精灵技术」答案</h4> <ul><li><p>问题 1：单行文字溢出显示省略号有什么应用场景？</p> <ul><li>文字过长超出了显示区域，如果全部显示会破坏布局，如果直接切断又会影响用户体验，此时在文字末尾<strong>用省略号替代超出的部分</strong>是一个很好的选择。</li></ul></li> <li><p>问题 2：要实现单行文字溢出显示省略号有哪三个条件？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 1. 强制在一行显示文本，默认 normal 会自动换行 */</span>
<span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>

<span class="token comment">/*2 . 超出的部分隐藏 */</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>

<span class="token comment">/* 3. 文字用省略号替代超出的部分 */</span>
<span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
</code></pre></div></li></ul> <h3 id="_4-6-多行文字溢出省略号显示"><a href="#_4-6-多行文字溢出省略号显示" class="header-anchor">#</a> 4.6 多行文字溢出省略号显示</h3> <blockquote><p>第 4 节课 / 5'01''</p></blockquote> <h4 id="_4-6-1-「多行文字溢出省略号显示」问题"><a href="#_4-6-1-「多行文字溢出省略号显示」问题" class="header-anchor">#</a> 4.6.1 「多行文字溢出省略号显示」问题</h4> <ul><li>问题 1：在实际的开发中，多行文字溢出省略号显示使用的多吗？为什么？</li> <li>问题 2：多行文字溢出省略号显示推荐由前端解决还是后端解决？</li></ul> <h4 id="_4-6-2-「多行文字溢出省略号显示」答案"><a href="#_4-6-2-「多行文字溢出省略号显示」答案" class="header-anchor">#</a> 4.6.2 「多行文字溢出省略号显示」答案</h4> <ul><li><p>问题 1：在实际的开发中，多行文字溢出省略号显示使用的多吗？为什么？</p> <ul><li>不多，因为存在较大兼容性问题，仅适用于 WebKit 浏览器或移动端（移动端大部分是 WebKit 内核）</li></ul></li> <li><p>问题 2：多行文字溢出省略号显示推荐由前端解决还是后端解决？</p> <ul><li>推荐由后端解决，也可以在产品设计原型时提前沟通。</li></ul></li> <li><p>多行文字溢出省略号显示代码如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/*1. 超出的部分隐藏 */</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>

<span class="token comment">/*2. 文字用省略号替代超出的部分 */</span>
<span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>

<span class="token comment">/* 3. 弹性伸缩盒子模型显示 */</span>
<span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>

<span class="token comment">/* 4. 限制在一个块元素显示的文本的行数 */</span>
<span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>

<span class="token comment">/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */</span>
<span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
</code></pre></div></li></ul> <h2 id="_5-布局技巧"><a href="#_5-布局技巧" class="header-anchor">#</a> 5. 布局技巧</h2> <ol><li>margin 负值的运用</li> <li>文字围绕浮动元素</li> <li>行内块的巧妙运用</li> <li>CSS 三角强化</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>思考：网页布局技巧只有这么多吗？网页布局技巧应该怎么学？</p> <p>提示：你永远不是第一个碰到这个问题的人。</p></div> <h3 id="_5-1-布局技巧-margin-负值巧妙运用-上"><a href="#_5-1-布局技巧-margin-负值巧妙运用-上" class="header-anchor">#</a> 5.1 布局技巧-margin 负值巧妙运用（上）</h3> <blockquote><p>第 4 节课 / 5'25'' + 4'32''</p></blockquote> <h4 id="_5-1-1-「margin-负值巧妙运用」问题"><a href="#_5-1-1-「margin-负值巧妙运用」问题" class="header-anchor">#</a> 5.1.1 「margin 负值巧妙运用」问题</h4> <ul><li>问题 1：margin 负值能解决什么问题？</li> <li>问题 2：要实现细线边框的合并，关键要点是什么？</li></ul> <h4 id="_5-1-2-「margin-负值巧妙运用」答案"><a href="#_5-1-2-「margin-负值巧妙运用」答案" class="header-anchor">#</a> 5.1.2 「margin 负值巧妙运用」答案</h4> <ul><li><p>问题 1：margin 负值能解决什么问题？</p> <ul><li><p>浮动盒子之间的边框合并</p> <p><img src="/basenode/assets/img/margin-border-01.a86aba30.png" alt="margin-border-01"></p></li></ul></li> <li><p>问题 2：要实现细线边框的合并，关键要点是什么？</p> <ul><li>每个盒子的 <code>margin</code> 往左侧移动 <code>-1px</code> 正好压住相邻盒子边框。</li></ul></li></ul> <h4 id="_5-1-3-「margin-负值巧妙运用」代码实现"><a href="#_5-1-3-「margin-负值巧妙运用」代码实现" class="header-anchor">#</a> 5.1.3 「margin 负值巧妙运用」代码实现</h4> <ol><li><p>结构 <code>ul&gt;li{$}*5</code>；</p></li> <li><p>基本浮动样式</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">ul li</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>关键代码</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">margin-left</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span>
</code></pre></div><blockquote><p>每个盒子的 <code>margin</code> 往左侧移动 <code>-1px</code> 正好压住相邻盒子边框。</p></blockquote></li></ol> <h3 id="_5-2-布局技巧-margin-负值巧妙运用-下"><a href="#_5-2-布局技巧-margin-负值巧妙运用-下" class="header-anchor">#</a> 5.2 布局技巧-margin 负值巧妙运用（下）</h3> <blockquote><p>第 4 节课 / 4'32''</p></blockquote> <h4 id="_5-2-1-「margin-负值巧妙运用」问题"><a href="#_5-2-1-「margin-负值巧妙运用」问题" class="header-anchor">#</a> 5.2.1 「margin 负值巧妙运用」问题</h4> <ul><li>问题 1：上一小节完成的代码中存在什么隐患？</li> <li>问题 2：视频中提供的第 1 种解决方案是什么？为什么能解决？</li> <li>问题 3：视频中提供的第 2 种解决方案是什么？为什么能解决？</li></ul> <h4 id="_5-2-2-「margin-负值巧妙运用」答案"><a href="#_5-2-2-「margin-负值巧妙运用」答案" class="header-anchor">#</a> 5.2.2 「margin 负值巧妙运用」答案</h4> <ul><li><p>问题 1：上一小节完成的代码中存在什么隐患？</p> <ul><li><p>如果鼠标经过 <code>li</code> 标签要显示边框，由于之前的方案中，<strong>右侧盒子是压住左侧盒子的</strong>，所以除了最右侧的盒子之外，其他的边框都显示的不完整。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">ul li:hover</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul></li> <li><p>问题 2：视频中提供的第 1 种解决方案是什么？为什么能解决？</p> <ul><li><p>鼠标经过时给 <code>li</code> 标签增加<strong>相对定位</strong>，因为<strong>设置了定位属性的盒子会压住别的盒子</strong>。</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">ul li:hover</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul></li> <li><p>问题 3：视频中提供的第 2 种解决方案是什么？为什么能解决？</p> <ul><li><p>如果<strong>父盒子</strong>已经<strong>有定位属性</strong>，此时再给 <code>li</code> 标签增加<strong>相对定位</strong>，每个盒子还会保持之前的层次关系，依旧显示不完整。</p></li> <li><p>此时可以使用 <code>z-index</code> 属性，修改盒子的显示层级，代码如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">ul li:hover</span> <span class="token punctuation">{</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>注意：<code>z-index</code> 的数值不需要单位，数值越大越靠前。</p></blockquote></li></ul></li></ul> <h3 id="_5-3-布局技巧-文字围绕浮动元素巧妙运用"><a href="#_5-3-布局技巧-文字围绕浮动元素巧妙运用" class="header-anchor">#</a> 5.3 布局技巧-文字围绕浮动元素巧妙运用</h3> <blockquote><p>第 4 节课 / 7'33''</p></blockquote> <h4 id="_5-3-1-「文字围绕浮动元素」问题"><a href="#_5-3-1-「文字围绕浮动元素」问题" class="header-anchor">#</a> 5.3.1 「文字围绕浮动元素」问题</h4> <ul><li>问题 1：文字围绕浮动元素效果应用了浮动的那个特性？可以应用于哪些场景？</li> <li>问题 2：如果不使用文字环绕能够实现同样的效果吗？</li></ul> <h4 id="_5-3-2-「文字围绕浮动元素」答案"><a href="#_5-3-2-「文字围绕浮动元素」答案" class="header-anchor">#</a> 5.3.2 「文字围绕浮动元素」答案</h4> <ul><li><p>问题 1：文字围绕浮动元素效果应用了浮动的那个特性？可以应用于哪些场景？</p> <ul><li><p>利用了浮动元素不会压住文字的特性。</p></li> <li><p>可以用在简单的图文新闻，如下图所示：</p> <p><img src="/basenode/assets/img/float-scene.54f635b7.png" alt="float-scene"></p></li></ul></li> <li><p>问题 2：如果不使用文字环绕能够实现同样的效果吗？</p> <ul><li>可以</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>文字环绕技巧知道就好，因为在布局时，最重要的是<strong>盒子的稳定</strong>。</p> <p>负责布局的盒子就负责布局，负责内容的盒子就负责内容，<strong>单一职责</strong>是更好的选择。</p></div> <h4 id="_5-3-3-「文字围绕浮动元素」代码实现"><a href="#_5-3-3-「文字围绕浮动元素」代码实现" class="header-anchor">#</a> 5.3.3 「文字围绕浮动元素」代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pic<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images/img.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>大盒子布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>图片显示</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.pic img</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>用盒子控制图像</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.pic</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_5-4-布局技巧-行内块的巧妙运用"><a href="#_5-4-布局技巧-行内块的巧妙运用" class="header-anchor">#</a> 5.4 布局技巧-行内块的巧妙运用</h3> <blockquote><p>第 5 节课 / 8'24''</p></blockquote> <h4 id="_5-4-1-行内块的巧妙运用案例目标"><a href="#_5-4-1-行内块的巧妙运用案例目标" class="header-anchor">#</a> 5.4.1 行内块的巧妙运用案例目标</h4> <p><img src="/basenode/assets/img/inline-box-demo.a6c9ddac.png" alt="inline-block-demo"></p> <h4 id="_5-4-2-行内块的巧妙运用演练目标"><a href="#_5-4-2-行内块的巧妙运用演练目标" class="header-anchor">#</a> 5.4.2 行内块的巧妙运用演练目标</h4> <p>行内块元素的特性：</p> <ol><li>把 <code>a</code> 标签转换为行内块，可以指定宽高，并且在一排显示；</li> <li>利用<strong>行内块元素中间有缝隙</strong>特性自动给标签间添加间距；</li> <li>给父级添加 <code>text-align: center;</code>、<code>line-height: 36px;</code>、<code>font-size: 14px;</code> 子级会<strong>继承</strong>，优化代码。</li></ol> <h4 id="_5-4-3-行内块的巧妙运用实现步骤"><a href="#_5-4-3-行内块的巧妙运用实现步骤" class="header-anchor">#</a> 5.4.3 行内块的巧妙运用实现步骤</h4> <ol><li>清除边距（在布局时，如果涉及到文本、段落、链接、<code>li</code> 之类的内容，建议先清除边距）；</li> <li>页面结构</li> <li>大盒子属性
<ol><li>水平居中 <code>margin: 50px auto;</code> / 高度 <code>38px</code>；</li> <li>文字水平居中 / 行高 <code>38px</code> / 字体大小 <code>14px</code> / 字体颜色 <code>#333</code></li></ol></li> <li><code>a</code> 标签属性
<ol><li>显示模式 <code>inline-block</code> / 宽高 <code>36px * 36px</code></li> <li>背景色 <code>#f7f7f7</code> / 边框颜色 <code>#ccc</code> / 文字颜色 <code>#333</code> / 不显示下划线</li></ol></li> <li>上一页（<code>.prev</code>） &amp; 下一页（<code>.next</code>）宽度 <code>85px</code></li> <li>当前选中（<code>.current</code>）&amp; 省略号（<code>.elp</code>）
<ol><li>背景色 <code>#fff</code> / 边框 <code>none</code></li></ol></li> <li>输入框
<ol><li>宽高 <code>45px * 36px</code></li> <li>边框颜色 <code>#ccc</code> / 不显示表达轮廓</li></ol></li> <li>确认按钮
<ol><li>宽高 <code>60px * 36px</code></li> <li>背景色 <code>#f7f7f7</code> / 边框颜色 <code>#ccc</code> / 粗体</li></ol></li></ol> <h4 id="_5-4-4-行内块的巧妙运用代码实现"><a href="#_5-4-4-行内块的巧妙运用代码实现" class="header-anchor">#</a> 5.4.4 行内块的巧妙运用代码实现</h4> <ol><li><p>清除边距（在布局时，如果涉及到文本、段落、链接、<code>li</code> 之类的内容，建议先清除边距）；</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>页面结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>prev<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="&lt;">&amp;lt;</span><span class="token entity named-entity" title="&lt;">&amp;lt;</span>上一页<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>current<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>elp<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>next<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>下一页<span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
  共10页 到第
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  页
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">&gt;</span></span>确定<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>大盒子布局及属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 50px auto<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 38px<span class="token punctuation">;</span>

  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 38px<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>

  <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>将 <code>a</code> 标签转换为行内块元素，并设置相关显示属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box a</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span>

  <span class="token property">background-color</span><span class="token punctuation">:</span> #f7f7f7<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>

  <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>提示：<code>a</code> 标签的 <code>text-align</code> / <code>line-height</code> / <code>font-size</code> 都能够从 <code>.box</code> 继承。</p></blockquote></li> <li><p>修改「上一页 <code>.prev</code>」和「下一页 <code>.next</code>」的宽度</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box .prev,
.box .next</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 85px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>取消「第 2 页 <code>.current</code>」和「... <code>.elp</code>」的边框和背景色</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box current,
.box .elp</span> <span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>设置 <code>input</code> 标签属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box input</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 45px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span>

  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
  <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>设置按钮属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box button</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span>

  <span class="token property">background-color</span><span class="token punctuation">:</span> #f7f7f7<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>删除 <code>.box</code> 的背景色</p></li></ol> <h3 id="_5-5-布局技巧-css-三角巧妙运用-上"><a href="#_5-5-布局技巧-css-三角巧妙运用-上" class="header-anchor">#</a> 5.5 布局技巧-CSS 三角巧妙运用（上）</h3> <blockquote><p>第 5 节课 / 6'09''</p></blockquote> <h4 id="_5-5-1-绘制直角三角形的思路和实现"><a href="#_5-5-1-绘制直角三角形的思路和实现" class="header-anchor">#</a> 5.5.1 绘制直角三角形的思路和实现</h4> <ol><li>将<strong>下边框</strong>和<strong>左边框</strong>的<strong>宽度</strong>设置为 <code>0</code>；</li> <li>让<strong>上边框</strong>比<strong>右边框</strong>的<strong>宽度</strong>大；</li> <li><strong>右边框</strong>设置颜色 / <strong>上边框颜色</strong>透明；</li></ol> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  <span class="token property">border-right</span><span class="token punctuation">:</span> 50px solid green<span class="token punctuation">;</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> 100px solid transparent<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="_5-5-2-绘制直角三角形课堂练习"><a href="#_5-5-2-绘制直角三角形课堂练习" class="header-anchor">#</a> 5.5.2 绘制直角三角形课堂练习</h4> <ul><li>提问：如果设置上边框颜色，右边框颜色设置为透明会得到什么形状三角形？</li></ul> <blockquote><p>CSS 中边框连接处是斜边连接的。</p></blockquote> <h3 id="_5-6-布局技巧-css-三角巧妙运用-下"><a href="#_5-6-布局技巧-css-三角巧妙运用-下" class="header-anchor">#</a> 5.6 布局技巧-CSS 三角巧妙运用（下）</h3> <blockquote><p>第 5 节课 / 7'02''</p></blockquote> <h4 id="_5-6-1-京东直角三角形实现步骤"><a href="#_5-6-1-京东直角三角形实现步骤" class="header-anchor">#</a> 5.6.1 京东直角三角形实现步骤</h4> <ol><li>用<strong>浮动</strong>的文字环绕特性，处理<strong>秒杀</strong>浮动和<strong>原始价格</strong>靠右的效果；</li> <li>利用<strong>子绝父相</strong> + 直角三角形<strong>修饰</strong>盒子。</li></ol> <h4 id="_5-6-2-京东直角三角形代码实现-1-基本布局"><a href="#_5-6-2-京东直角三角形代码实现-1-基本布局" class="header-anchor">#</a> 5.6.2 京东直角三角形代码实现（1）基本布局</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>price<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>miaosha<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>￥1650.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>origin<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>￥5088.00<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>.price</code> 布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.price</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 50px auto<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>

  <span class="token property">line-height</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>

  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p><code>.miaosha</code> 布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.miaosha</span> <span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 90px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>

  <span class="token property">background-color</span><span class="token punctuation">:</span> #f00<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">font-weight</span><span class="token punctuation">:</span> 700<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>提示：<code>.miaosha</code> 使用 <code>float: left;</code> 既可以浮动，又可以利用文字环绕把<strong>原始价格</strong>挤到右侧。</p></blockquote></li> <li><p><code>.origin</code> 布局</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.origin</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> line-through<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p><code>text-decoration</code> 是文本装饰，带线条的要想它。</p></blockquote></li></ol> <h4 id="_5-6-3-京东直角三角形代码实现-2-直角三角形"><a href="#_5-6-3-京东直角三角形代码实现-2-直角三角形" class="header-anchor">#</a> 5.6.3 京东直角三角形代码实现（2）直角三角形</h4> <ol><li><p>增加 <code>i</code> 标签用于绘制直角三角形</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>miaosha<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">&gt;</span></span>￥1650.00
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>给 <code>.miaosha</code> 增加相对定位</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.miaosha</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  ...<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>绘制直角三角形并定位</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.miaosha i</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  <span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">line-height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> 24px solid transparent<span class="token punctuation">;</span>
  <span class="token property">border-right</span><span class="token punctuation">:</span> 12px solid #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_5-7-css-初始化"><a href="#_5-7-css-初始化" class="header-anchor">#</a> 5.7 CSS 初始化</h3> <blockquote><p>第 5 节课 / 7'37''</p></blockquote> <h4 id="_5-7-1-「css-初始化」问题"><a href="#_5-7-1-「css-初始化」问题" class="header-anchor">#</a> 5.7.1 「CSS 初始化」问题</h4> <ul><li>问题 1：CSS 初始化主要做了什么事情？能解决什么问题？</li> <li>问题 2：每个网页都必须首先进行 CSS 初始化吗？</li> <li>问题 3：京东初始化的代码你能看懂了吗？会保存下来吗？</li></ul> <h4 id="_5-7-2-「css-初始化」答案"><a href="#_5-7-2-「css-初始化」答案" class="header-anchor">#</a> 5.7.2 「CSS 初始化」答案</h4> <ul><li><p>问题 1：CSS 初始化主要做了什么事情？能解决什么问题？</p> <ul><li>CSS 初始化主要是<strong>重设浏览器的样式</strong>。</li> <li>因为不同浏览器对有些标签的默认属性值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化。</li></ul></li> <li><p>问题 2：每个网页都必须首先进行 CSS 初始化吗？</p> <ul><li>是的</li></ul></li> <li><p>问题 3：京东初始化的代码你能看懂了吗？会保存下来吗？</p> <ul><li>可以保存</li> <li><strong>CSS 初始化不是标准，而是由很多前端工程师不断积累出来的</strong>，我们要像大厂学习，再没有更好的方案之前，直接拿来用。</li></ul></li></ul> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token comment">/* CSS3 抗锯齿形 让文字显示的更加清晰 */</span>
  <span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 12px/1.5 Microsoft YaHei<span class="token punctuation">,</span> Heiti SC<span class="token punctuation">,</span> tahoma<span class="token punctuation">,</span> arial<span class="token punctuation">,</span> Hiragino Sans GB<span class="token punctuation">,</span> <span class="token string">'\5B8B\4F53'</span><span class="token punctuation">,</span>
    sans-serif<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">em,
i</span> <span class="token punctuation">{</span>
  <span class="token property">font-style</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li</span> <span class="token punctuation">{</span>
  <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">a</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #666<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #c81623<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">img</span> <span class="token punctuation">{</span>
  <span class="token comment">/* border 0 照顾低版本浏览器，如果图片外面包含了链接会有边框的问题 */</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token comment">/* 取消图片底侧有空白缝隙的问题 */</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">button</span> <span class="token punctuation">{</span>
  <span class="token comment">/* 鼠标经过 button 时，更改鼠标指针，提示用户可以点击 */</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">button,
input</span> <span class="token punctuation">{</span>
  <span class="token comment">/* &quot;\5B8B\4F53&quot; 是宋体，可以保证浏览器更高的兼容性 */</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> Microsoft YaHei<span class="token punctuation">,</span> Heiti SC<span class="token punctuation">,</span> tahoma<span class="token punctuation">,</span> arial<span class="token punctuation">,</span> Hiragino Sans GB<span class="token punctuation">,</span> <span class="token string">'\5B8B\4F53'</span><span class="token punctuation">,</span>
    sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.hide,
.none</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 清除浮动 */</span>
<span class="token selector">.clearfix:after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
  <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.clearfix</span> <span class="token punctuation">{</span>
  *<span class="token property">zoom</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/css/day06.html" class="prev">
        CSS 第 06 天 —— 定位
      </a></span> <span class="next"><a href="/basenode/css/day08.html">
        CSS 第 08 天 —— HTML5+CSS3 提高
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/4.4eeb3907.js" defer></script>
  </body>
</html>
